<template>
	<view class="tui-collapse" :style="{ backgroundColor: bgColor }">
		<view class="tui-collapse-head" :style="{ backgroundColor: hdBgColor }" @tap.stop="handleClick">
			<view class="tui-header" :class="{ 'tui-opacity': disabled }"><slot name="title"></slot></view>
		</view>
		<view class="tui-collapse-body_box" :style="{ backgroundColor: bdBgColor, height: isOpen ? height : '0rpx' }">
			<view class="tui-collapse-body" :class="{ 'tui-collapse-transform': height == 'auto', 'tui-collapse-body_show': isOpen && height == 'auto' }">
				<slot name="content"></slot>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'tuiCollapse',
	props: {
		//collapse背景颜色
		bgColor: {
			type: String,
			default: 'transparent'
		},
		//collapse-head 背景颜色
		hdBgColor: {
			type: String,
			default: '#fff'
		},
		//collapse-body 背景颜色
		bdBgColor: {
			type: String,
			default: 'transparent'
		},
		//collapse-body实际高度 open时使用
		height: {
			type: String,
			default: 'auto'
		},
		//索引
		index: {
			type: Number,
			default: 0
		},
		//当前索引，index==current时展开
		current: {
			type: Number,
			default: -1
		},
		// 是否禁用
		disabled: {
			type: [Boolean, String],
			default: false
		},
		//是否带箭头
		arrow: {
			type: [Boolean, String],
			default: true
		},
		//箭头颜色
		arrowColor: {
			type: String,
			default: '#333'
		}
	},
	watch: {
		current() {
			this.updateCurrentChange();
		}
	},
	created() {
		this.updateCurrentChange();
	},
	data() {
		return {
			isOpen: false
		};
	},
	methods: {
		updateCurrentChange() {
			this.isOpen = this.index == this.current;
		},
		handleClick() {
			if (this.disabled) return;
			this.$emit('click', {
				index: Number(this.index)
			});
		}
	}
};
</script>

<style scoped>
.tui-arrow-padding {
	padding-right: 62rpx;
	box-sizing: border-box;
}

.tui-icon-active {
	transform: rotate(180deg);
	transform-origin: center center;
}

.tui-header {
	position: relative;
	z-index: 2;
	color: #323232;
	font-size: 24rpx;
	padding: 12rpx 23rpx;
}
.tui-header::before {
	content: '';
	position: absolute;
	width: 10rpx;
	height: 23rpx;
	background: #ef6c26;
	top: 50%;
	display: block;
	transform: translateY(-50%);
	left: 0;
}
.tui-collapse-body_box {
	transition: all 0.25s;
	overflow: hidden;
}
.tui-collapse-body {
	transition: all 0.25s;
	overflow: hidden;
	position: relative;
	z-index: 1;
}

.tui-collapse-transform {
	opacity: 0;
	visibility: hidden;
	-webkit-transform: translateY(-40%);
	transform: translateY(-40%);
}

.tui-collapse-body_show {
	opacity: 1;
	visibility: visible;
	-webkit-transform: translateY(0);
	transform: translateY(0);
}

.tui-opacity {
	opacity: 0.6;
}
</style>
